'use client';

import { getRootFontSize } from '@/lib/utils/utils';
import { useEffect } from 'react';

/**
 * REM适配方案
 * 基于1920px设计稿，动态设置根节点字体大小
 * 实现多端等比缩放响应式设计
 */
export function useRemAdapter(): void {
  useEffect(() => {
    // 初始化设置
    updateRootFontSize();

    // 防抖处理窗口变化事件
    let timer: NodeJS.Timeout;
    const handleResize = (): void => {
      clearTimeout(timer);
      timer = setTimeout(updateRootFontSize, 100);
    };

    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
      window.removeEventListener('resize', handleResize);
      clearTimeout(timer);
    };
  }, []);
}

/**
 * 更新根字体大小函数
 * 1. 基准字体: 16px (1rem = 16px)
 * 2. 最小字体: 16px (不允许低于此值)
 * 3. 最大字体: 无上限 (允许根据屏幕大小无限放大)
 */
function updateRootFontSize(): void {
  document.documentElement.style.fontSize = `${getRootFontSize()}px`;
}

export default useRemAdapter; 